<template>
  <div style="display: flex; flex-direction: column; width: 100%">
    <div class="mb16">
      <div
        class="flex-center pl10"
        style="flex-flow: row; height: 35px; width: 100%; background-color: #fffbe6; border: 1px solid #ffe58f; border-radius: 5px"
      >
        <img style="width: 16px; height: 16px; margin-right: 5px" src="@/assets/icons/重复.png" />
        <span style="color: #55565d; font-size: 14px">
          本次参保 {{ allCount }} 人，{{ successCount }} 人成功，<span class="fw500">{{ errorCount }}</span> 人失败，失败结果如下：
        </span>
      </div>
    </div>
    <a-table :columns="columnsResultList" :dataSource="errorLst" :scroll="{ x: true }" rowKey="empId" :pagination="false">
      <template slot="dateRange" slot-scope="text, record"> {{ formatDate(record.beginTime) }}～{{ formatDate(record.endTime) }} </template>
      <template slot="action" slot-scope="text, record">
        <a-space>
          <span class="pointer tc-theme" :class="{ 'tc-l3': record.confirmed }" @click="record.confirmed ? () => {} : doConfirm(record)"
            >确认新增</span
          >
          <span class="pointer tc-theme" :class="{ 'tc-l3': record.confirmed }" @click="record.confirmed ? () => {} : notConfirm(record)"
            >放弃新增</span
          >
        </a-space>
      </template>
    </a-table>
  </div>
</template>
<script>
import { columnsResultList } from "./funcs";
export default {
  name: "",
  components: {},
  mixins: [],
  props: {
    resultData: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      columnsResultList,
      allCount: 0,
      errorCount: 0,
      successCount: 0,
      errorLst: []
    };
  },
  computed: {},
  watch: {
    resultData: {
      handler(newVal) {
        if (newVal) {
          this.allCount = newVal.allCount;
          this.errorCount = newVal.errorCount;
          this.successCount = newVal.successCount;
          this.errorLst = newVal.errorList;
        }
      },
      immediate: true,
      deep: true
    }
  },
  created() {},
  mounted() {},
  methods: {
    formatDate(val) {
      if (val) {
        return this.$dayjs(val).format("YYYY-MM-DD");
      }
      return "--";
    },
    notConfirm(record) {
      this.errorLst = this.errorLst.map((item) => ({
        ...item,
        confirmed: item.empId === record.empId ? true : item.confirmed
      }));
    },
    doConfirm(record) {
      this.$confirm({
        title: "新增在保提示",
        content: record.errorCause,
        onOk: () => {
          this.$request({
            url: `/insurance/api/v1/qyInsuranceRecords`,
            method: "post",
            data: {
              empId: record.empId,
              empName: record.name,
              idCard: record.idCard,
              schemeId: record.schemeId,
              beginTime: record.beginTime,
              endTime: record.endTime,
              careerType: record.careerType,
              monthAmount: record.monthAmount
            }
          })
            .then((res) => {
              this.$message.success("新增成功");
              this.errorLst = this.errorLst.map((item) => ({
                ...item,
                confirmed: item.empId === record.empId ? true : item.confirmed
              }));
            })
            .catch((err) => {
              console.log("overlaidDataReq", err);
            });
        }
      });
    }
  }
};
</script>
<style lang="scss"></style>
